<template>
	<div>
		<nav-bar>
			<template v-slot:left>
				<img src="../../assets/images/left.png" alt="return icon">
			</template>
			<template v-slot:center>购物车</template>
		</nav-bar>
		<div class="cart-item" v-for="(item,index) in details" :key="item.id" >
			<input type="radio" class="check_radio" :checked="item.isChecked" @click="checkClick(index)"/>
			<div class="add-sub">
				<button class="add-button" @click="itemCount(index,1)">+</button>
				<span class="cart-count">{{ item.count }}</span>
				<button class="sub-button" @click="itemCount(index,-1)" :disabled="item.isDisabled">-</button>
			</div>
			<button class="button-delete" @click="itemDelete(index)">删除订单</button>
			<van-card
					:price="item.price"
					:desc="item.description"
					:title="item.title"
					:thumb="item.cover_url"
			/>
		</div>
		<van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" style="margin-bottom: 60px">
			<input type="radio" id="allChecked" class='check-all' @click="allSelectClick" :checked="isCheckAll">
			<label for="allChecked">全选</label>
		</van-submit-bar>
	
	
	</div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar";
import {onMounted, reactive, ref, toRefs} from "vue";
import {useStore} from 'vuex'
import {queryItem} from "../../network/Cart";
import {useRouter} from "vue-router";

export default {
	name: "shopCart",
	components: {
		NavBar
	},
	setup() {
		
		let totalPrice = ref(0) // 总价格
		const store = useStore()  // 引入vuex
		const isCheckAll = ref(false)
		const router = useRouter() // 路由
		// 响应数据模型
		let itemInfo = reactive({
			details: []
		})
		
		// 数量按钮点击事件
		const itemCount = (index, num) => {
			// 当数量低于0时禁用减按钮
			itemInfo.details[index].isDisabled = (itemInfo.details[index].count === 1)
			itemInfo.details[index].count += num  //数量加一
			updateTotalPrice();
		}
		
		// 全选按钮事件
		const allSelectClick = () => {
			isCheckAll.value = !isCheckAll.value
			// 改变所有选中状态
			itemInfo.details.map((value) => {
				return value.isChecked = isCheckAll.value
			})
			updateTotalPrice()
		}
		
		// 单选按钮事件
		const checkClick = (index) => {
			// 单击改变选中状态
			itemInfo.details[index].isChecked = !itemInfo.details[index].isChecked
			updateTotalPrice()
		}
		
		// 删除订单事件
		const itemDelete = (index) => {
			store.commit('deleteItem', index)
			loadItem()
		}
		
		// 更新购物车总价格
		const updateTotalPrice = () => {
			// 重新计算重置总价
			totalPrice.value = 0
			let temp = 0 // 单项商品的总价
			for (let i = 0; i < itemInfo.details.length; i++) {
				if (itemInfo.details[i].isChecked === true) {
					temp = (itemInfo.details[i].price * 100 * (itemInfo.details[i].count)) / 100
				} else {
					temp = 0
				}
				totalPrice.value += temp
			}
		}
		// 加载购物车商品条目的方法
		const loadItem = () => {
			// 取出购物车中商品数据
			const items = store.state.cartItem
			if (items) {
				queryItem(items).then(res => {
					// 为得到的响应数据增加两条属性
					for (let i = 0; i < res.length; i++) {
						res[i].isDisabled = false // 禁用按钮
						res[i].isChecked = false // 是否选中单个商品
					}
					itemInfo.details = res
				})
			} else {
				router.push('/shopcart')
			}
			
		}
		onMounted(() => {
			loadItem()
		})
		return {
			itemCount,
			checkClick,
			...toRefs(itemInfo),
			totalPrice,
			allSelectClick,
			isCheckAll,
			itemDelete
		}
	}
	
}
</script>

<style scoped>
.van-card__price {
	color: red;
}

.check_radio {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 10px;
	top: 50px;
	z-index: 9;
}

.cart-item {
	margin-top: 50px;
	padding-left: 10px;
	position: relative;
}

.cart_bottom {
	margin-bottom: 60px;
	display: inline;
}

.add-sub {
	z-index: 9;
	width: 60px;
	height: 20px;
	display: flex;
	position: absolute;
	bottom: 7px;
	right: 25px;
}

.add-button {
	outline: none;
	border: none;
	flex: 1;
}

.sub-button {
	outline: none;
	border: none;
	flex: 1;
}

.cart-count {
	flex: 2;
}

.check-all {
	width: 20px;
	height: 20px;
}

.button-delete {
	border: 0;
	outline: none;
	
	font-size: 14px;
	background-color: rgba(241, 69, 47, 0.84);
	z-index: 9;
	position: absolute;
	top: 5px;
	right: 10px;
}
</style>